﻿<link type="text/css" href="@Url.Content("~/Content/css/workflow.css")" rel="stylesheet" />
<script type="text/javascript" src="@Url.Content("/BaseResource/Script/configui.js")"></script>

@section Tail_Js{
    <script type="text/javascript" src="@Url.Content("~/Plugin/jsplumb/dist/js/jsplumb.js")"></script>
    <script type="text/javascript" src="@Url.Content("/BaseResource/Plugin/uuuid/uuuid.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("/BaseResource/Plugin/mustache/mustache.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/styleConfig.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/index.js")"></script>    
}
<style>
    .nodeDel {
        display: none;
    }
</style>
<div id="traceTab" class="easyui-tabs" data-options="fit:true,border:false">
    <div title="流程追踪">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'center',border:false" style="background-image: url('/WorkFlow/Content/img/wg.png');">
                    <div id="diagramContainer" style="position:relative;height:100%">
                    </div>
            </div>
            <div data-options="region:'south',split:true,collapsible:false,border:false" style="height:50%;">
                <table id="dgTrace" class="easyui-datagrid" rownumbers="true" fit="true" pagination="true" fitcolumns="true" striped="true" border="false" idfield="Id"
                       url="GetTraceList?FormInstId=@ViewBag.FormInstId" autorowheight="false" singleselect="true">
                    <thead>
                        <tr>
                            <th field="Name" width="200" halign='center'>
                                环节名称
                            </th>
                            <th field="Receiver" width="100" halign='center' align="center">
                                接收人
                            </th>
                            <th field="ReceiveTime" width="150" halign='center' align="center">
                                接收时间
                            </th>
                            <th field="Operator" width="100" halign='center' align="center">
                                操作人
                            </th>
                            <th field="OperateTime" width="150" halign='center' align="center">
                                操作时间
                            </th>
                            <th field="OperateTimeSpan" width="150" halign='center'>
                                操作耗时
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <div title="流程表单">
        <form method="post" id="mf_form">
            @Html.Raw(ViewBag.FormHtml)
        </form>
    </div>
</div>


<script id="tpl-Start" type="text/html">
    <div class="flowNodeDiv startNode" id="{{Id}}" style="top:{{Top}}px;left:{{Left}}px;">
        <a href="#">
            <img src="/WorkFlow/Content/img/play.png" style="margin: 0 auto;display: block;">
        </a>
    </div>
</script>
<script id="tpl-Process" type="text/html">
    <div class='flowNodeDiv processNode' id='{{Id}}' style='top:{{Top}}px;left:{{Left}}px'>
        <div id='{{Id}}Del' class="nodeDel" onclick="deleteNode('{{Id}}')">X</div>
        <a href="#" style="cursor:auto" ondblclick="editNode('{{Id}}')">
            {{#IsCurrent}}<img src="/WorkFlow/Content/img/userSign.png" style="margin: 0 auto;display: block;">{{/IsCurrent}}
            {{^IsCurrent}}<img src="/WorkFlow/Content/img/user.png" style="margin: 0 auto;display: block;">{{/IsCurrent}}

        </a>
        <span id='{{Id}}Title' class="nodeTitle">{{Name}}</span>
    </div>
</script>
<script id="tpl-End" type="text/html">
    <div class='flowNodeDiv endNode' id='{{Id}}' style='top:{{Top}}px;left:{{Left}}px'>
        <a href="#">
            <img src="/WorkFlow/Content/img/stop.png" style="margin: 0 auto;display: block;">
        </a>
    </div>
</script>
<script>
    @Html.Raw(ViewBag.Script)
</script>
<script>
    var id = queryString('Id');
    var formId = '@ViewBag.FormId'

    addGridDate('dgTrace', 'ReceiveTime', 'yyyy-MM-dd hh:mm:ss');
    addGridDate('dgTrace', 'OperateTime', 'yyyy-MM-dd hh:mm:ss');
</script>
<script>
    $('#diagramContainer').css('top', '0px');
    function loadFlowDesign() {
        var formInstId = id;
        addAjaxParam('FormInstId', formInstId);
        commitAjax('GetStepGraph', {
            CallBack: function (data) {
                if (data) {
                    $.each(data.Nodes, function (index, item) {
                        addNode(item.WFNodeType, item, true);
                    })

                    $.each(data.Routings, function (index, item) {
                        addConnect(item, item.SNodeDefInstId, item.ENodeDefInstId, !item.IsFinish);
                    })
                }
                else {
                    msgBox('获取失败');
                }
            }
        })
    }
</script>